<template>
  <div style="width: 100%">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="问题描述" prop="question">
        <el-input v-model="form.question"></el-input>
      </el-form-item>
      <el-form-item label="问题解答" prop="answer">
        <quill-editor ref="text" v-model="form.answer" :options="editorOption"/>
        <!--        <el-input type="textarea" resize="none" v-model="form.answer"></el-input>-->
      </el-form-item>
      <el-form-item label-width="0" style="text-align: center">
        <el-button type="primary" @click="onSubmit">{{ form.id ? '保存修改' : '确认添加' }}</el-button>
      </el-form-item>
    </el-form>
    <el-upload
        v-show="false"
        id="quill-upload"
        :action="uploadFileApi"
        name="upload_file"
        multiple
        :limit="1"
        accept="image/*"
        :headers="header"
        list-type="picture"
        :show-file-list="false"
        :on-error="uploadError"
        :on-success="handleExceed">
      <el-button size="small" type="primary"></el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import {findById} from "@/api/knowledge";
import {quillEditor} from 'vue-quill-editor'
import {getToken, isEmail} from "@/libs/util";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import EditorConfig from '@/config/editor'

export default {
  name: "edit",
  components: {
    quillEditor
  },
  data() {
    return {
      form: {
        id: null,
        question: '',
        answer: ''
      },
      header:{
        'Authorization' : 'Bearer ' + getToken()
      },
      editorOption: {
        theme: "snow", // or 'bubble'
        placeholder: "",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              [{header:1},{header:2}],
              [{ align: [] }], // 对齐方式
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ color: [] }], // 字体颜色、字体背景颜色
              ['image']
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector("#quill-upload input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      uploadFileApi: EditorConfig.uploadFileApi,
      rules: {
        question: [
          {required: true, message: '请输入问题描述', trigger: 'blur'}
        ],
        answer: [
          {required: true, message: '请输入问题解答', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form)
        } else {
          return false;
        }
      })
    },
    uploadError(){
      this.$message.error('图片插入失败')
    },
    handleExceed(response, file, fileList){
      let quill = this.$refs.text.quill
      if (response.code === 200) {
        let length = quill.getSelection().index;
        quill.insertEmbed(length, 'image', response.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      }else{
        this.$message.error('图片插入失败')
      }
      this.fileList = fileList
    },
    reset() {
      this.form = {
        id: null,
        question: '',
        answer: ''
      }
    },
    getKnowledge(id) {
      findById(id).then(res => {
        if (res.code == 200) {
          res.data.id = res.data.knowledgeId
          this.form = res.data
        }
      })
    }
  },
  watch: {
    id() {
      console.log(this.id)
      if (this.id == null) {
        return
      }
      findById(this.id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.form = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-textarea__inner {
  min-height: 300px !important;
}


/deep/ .ql-snow .ql-picker-label::before {
  vertical-align: top;
}

/deep/ .ql-snow .ql-picker.ql-size {
  width: 78px !important;
}

/deep/ .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
}

/deep/ .ql-snow * {
  vertical-align: top !important;
}

/deep/ .ql-toolbar.ql-snow {
  padding-bottom: 0;
}

/deep/ .ql-editor {
  height: 250px;
}
</style>
